---
---

@use 'main
{%- if jekyll.environment == 'production' -%}
  .bundle
{%- endif -%}
';

/* append your custom style below */

@mixin x_ite-dark-scheme {
  --system-red: rgb(255, 69, 58);
  --system-orange: rgb(255, 159, 10);
  --system-yellow: rgb(255, 214, 10);
  --system-green: rgb(48, 209, 88);
  --system-mint: rgb(102, 212, 207);
  --system-teal: rgb(64, 200, 224);
  --system-cyan: rgb(100, 210, 255);
  --system-blue: rgb(10, 132, 255);
  --system-indigo: rgb(94, 92, 230);
  --system-purple: rgb(191, 90, 242);
  --system-pink: rgb(255, 55, 95);
  --system-brown: rgb(172, 142, 104);

  --system-gray0: rgb(72, 72, 77);
  --system-gray1: rgb(122, 122, 127);
  --system-gray2: rgb(174, 174, 178);
  --system-gray3: rgb(199, 199, 204);
  --system-gray4: rgb(209, 209, 214);
  --system-gray5: rgb(229, 229, 234);
  --system-gray6: rgb(242, 242, 247);
  --system-gray7: rgb(249, 249, 255);
  --system-gray8: rgb(255, 255, 255);

  --nav-border-color: rgba(158, 158, 158, 0.17);

  --h2-color: rgb(228, 228, 93);
  --h3-color: rgb(185, 137, 79);
  --h3-color-strong: rgb(232, 201, 133);
  --h4-color: rgb(60, 107, 184);
  --h4-color-strong: rgb(175, 206, 255);
}

@mixin x_ite-light-scheme {
  --system-red: rgb(255, 59, 48);
  --system-orange: rgb(255, 149, 0);
  --system-yellow: rgb(255, 214, 10);
  --system-green: rgb(52, 199, 89);
  --system-mint: rgb(0, 199, 190);
  --system-teal: rgb(48, 176, 199);
  --system-cyan: rgb(50, 173, 230);
  --system-blue: rgb(0, 122, 255);
  --system-indigo: rgb(88, 86, 214);
  --system-purple: rgb(175, 82, 222);
  --system-pink: rgb(255, 45, 85);
  --system-brown: rgb(162, 132, 94);

  --system-gray0: rgb(204, 204, 209);
  --system-gray1: rgb(142, 142, 147);
  --system-gray2: rgb(99, 99, 102);
  --system-gray3: rgb(72, 72, 74);
  --system-gray4: rgb(58, 58, 60);
  --system-gray5: rgb(44, 44, 46);
  --system-gray6: rgb(28, 28, 30);
  --system-gray7: rgb(21, 21, 23);
  --system-gray8: rgb(0, 0, 0);

  --h2-color: rgb(189, 0, 106);
  --h3-color: rgb(159, 103, 34);;
  --h3-color-strong: rgb(173, 81, 0);
  --h4-color: rgb(29, 80, 163);
  --h4-color-strong: rgb(10, 80, 144);
}

@media (prefers-color-scheme: dark) {
  html:not([data-mode]), html[data-mode=dark] {
    @include x_ite-dark-scheme;
  }

  html[data-mode=light] {
    @include x_ite-light-scheme;
  }
}

@media (prefers-color-scheme: light) {
  html[data-mode=dark] {
    @include x_ite-dark-scheme;
  }

  html:not([data-mode]), html[data-mode=light] {
    @include x_ite-light-scheme;
  }
}

@media all and not (max-width: 1199px) {
  .post-tail-wrapper > .nav-wrapper {
    display: none;
  }
}

html {
  overflow: auto;
}

/* append your custom style below */

.red {
  color: var(--system-red) !important;
}

.green {
  color: var(--system-green) !important;
}

.blue {
  color: var(--system-blue) !important;
}

.yellow {
  color: var(--system-yellow) !important;
}

header a.rounded-circle {
  border-radius: 0% !important;
}

#topbar-title {
  text-transform: uppercase;
}

.nav-wrapper {
  margin-top: 4rem;
  border-left: 1px solid var(--nav-border-color);
  transition: top 0.2s ease-in-out;
  -webkit-animation: fade-up 0.8s;
  animation: fade-up 0.8s;
}

.nav-wrapper a.active {
  font-weight: bold;
}

.content h1 {
  color: var(--link-color);
  font-weight: bold;
}

.content h2 {
  color: var(--h2-color);
}

.content h3 {
  color: var(--h3-color);
}

.content h3 strong {
  color: var(--h3-color-strong);
}

.content h4 {
  color: var(--h4-color);
}

.content h4 strong {
  color: var(--h4-color-strong);
}

.content h5 {
  font-weight: bold;
}

.post-tail-wrapper .nav-wrapper {
  border: 1px solid var(--nav-border-color);
  border-radius: 10px;
}

.post-tail-wrapper .nav-wrapper h2 {
  margin-top: 0.5rem;
  font-size: 1rem;
}

.post-tail-wrapper .nav-wrapper a {
  font-size: var(--bs-body-font-size);
}

.clear {
  clear: both;
}

small, .small {
  font-size: 75%;
}

.content x3d-canvas,
.content iframe {
  border: none;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

span[data-label-text="X3D" i],
span[data-label-text="VRML" i] {
  text-transform: uppercase;
}

.table-wrapper > table tbody tr td,
.table-wrapper > table thead th {
  white-space: initial;
}

/* Patreon link  */

.patreon {
  display: block;
  border: 1px solid !important;
  border-radius: .625rem;
  padding: .5rem;
  text-align: center;
}

/* download links */

.content a.download {
  padding: 1rem 2rem;
  border-radius: 1rem;
  border-style: solid;
  border-color: var(--link-underline-color);
  border-width: 8px;
  font-weight: bold;
}

.content a.download:hover {
  border-color: #d2603a;
  border-width: 8px;
}
